<!-- 错误信息提示框 -->
<div class="col-md-4 col-md-offset-4 postion" *ngIf="showErrorTip">
  <div class="col-md-10 col-md-offset-1">
    <div class="alert alert-danger">
      <span class="glyphicon glyphicon-info-sign"></span>
      <div class="w10"></div>{{errorMessage}}</div>
  </div>
</div>
<div class="content">
  <div class="heading">
    <div class="container">
      <img class="logo" src="/assets/images/tea_logo.jpg" alt="loading"/>
      <span>欢迎注册</span>
      <div class="to-login">
        <span>已有账号？</span>
        <a [routerLink]="['/login']">请登录</a>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="container mt20">
        <div class="col-md-4 col-md-offset-4">
          <form class="form-horizontal register-form" #registerForm="ngForm" (ngSubmit)="submit()">
            <div class="form-group">
              <label for="userName" class="col-md-3 control-label">用&nbsp;户&nbsp;名</label>
              <div class="col-md-9">
                <input type="text" class="form-control" id="userName" name="userName" [(ngModel)]="userName" #localUserName="ngModel"
                placeholder="您的账户名和登录名" required maxlength="25" [class.red-border]="localUserName.touched && localUserName.invalid"/>
              </div>
            </div>
            <div class="form-group">
              <label for="password" class="col-md-3 control-label">设&nbsp;置&nbsp;密&nbsp;码</label>
              <div class="col-md-9">
                <input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" #localPassword="ngModel"
                placeholder="安全起见，密码不能少于6位" minlength="6" maxlength="25" required [class.red-border]="localPassword.touched && localPassword.invalid"
                (input)="passwordIsIdentical = true;"/>
              </div>
            </div>
            <!-- <div class="col-md-8 col-md-offset-3 notice fs12">
              <span class="glyphicon glyphicon-info-sign"></span>&nbsp;&nbsp;安全起见，密码不能少于6位
            </div> -->
            <div class="form-group">
              <label for="repeatPassword" class="col-md-3 control-label">确&nbsp;认&nbsp;密&nbsp;码</label>
              <div class="col-md-9">
                <input type="password" class="form-control" id="repeatPassword" name="repeatPassword" [(ngModel)]="repeatPassword" #localRepeatPassword="ngModel"
                placeholder="安全起见，密码不能少于6位" minlength="6" maxlength="25" required [class.red-border]="localRepeatPassword.touched && localRepeatPassword.invalid"
                (input)="passwordIsIdentical = true;"/>
              </div>
            </div>
            <div class="alert alert-danger" role="alert" *ngIf="!passwordIsIdentical">
              <span class="glyphicon glyphicon-remove"></span><span class="ml30"><strong>两次输入的密码不一致</strong></span>
            </div>
            <div class="form-group">
              <label for="phoneNumber" class="col-md-3 control-label">手&nbsp;机&nbsp;号</label>
              <div class="col-md-9">
                <input type="tel" class="form-control" id="phoneNumber" name="phoneNumber" [(ngModel)]="phoneNumber" #localPhoneNumber="ngModel"
                placeholder="建议使用常用手机" maxlength="11"  required [class.red-border]="localPhoneNumber.touched && localPhoneNumber.invalid"
                (input)="phoneIsCorrect = true;" (keypress)="removeChar($event)" onpaste="return false" ondragenter="return false" 
                onkeyup="this.value=this.value.replace(/[^\d]/g,'')"/>
              </div>
            </div>
            <div class="alert alert-danger" role="alert" *ngIf="!phoneIsCorrect">
              <span class="glyphicon glyphicon-remove"></span><span class="ml30"><strong>手机号码格式不正确</strong></span>
            </div>
            <div class="form-group">
              <label for="phoneValidateNumber" class="col-md-3 control-label">验&nbsp;证&nbsp;码</label>
              <div class="col-md-5 validate-number">
                <input type="text" class="form-control number-input" id="phoneValidateNumber" name="phoneValidateNumber" [(ngModel)]="phoneValidateNumber" required
                placeholder="请输入手机验证码" maxlength="6" #localPhoneValidateNumber="ngModel" [class.red-border]="localPhoneValidateNumber.touched && localPhoneValidateNumber.invalid"/>
              </div>
              <div class="col-md-4 validate-button">
                <a class="btn btn-info" (click)="countDown($event)" style="width: 100%;">获取验证码</a>
              </div>
            </div>
            <div class="alert alert-danger" *ngIf="!phoneValidateNumberIsCorrect" role="alert">
              <span class="glyphicon glyphicon-remove"></span><span class="ml30"><strong>手机验证码不正确</strong></span>
            </div>
            <div class="form-group">
              <div class="col-md-6">
                <input type="text" class="form-control" id="imgNumber" name="imgNumber" [(ngModel)]="imgNumber" #localImgNumber="ngModel"
                placeholder="请输入图片验证码" maxlength="4" required [class.red-border]="localImgNumber.touched && localImgNumber.invalid"
                (input)="imgNumberIsCorrect = true;"/>
              </div>
              <div class="col-md-6">
                <div class="img-validate-div col-md-6" (click)="generateImageNumber()">
                    <span class="img-validate-number">
                      {{generatedImgNumber}}
                    </span>
                </div>
                <div class="col-md-6" style="line-height: 34px;">
                    <a (click)="generateImageNumber()" style="cursor: pointer">看不清?</a>
                </div>
              </div>
            </div>
            <div class="alert alert-danger" role="alert" *ngIf="!imgNumberIsCorrect">
              <span class="glyphicon glyphicon-remove"></span><span class="ml30"><strong>图片验证码不正确</strong></span>
            </div>
            <button type="submit"class="btn btn-danger btn-block" [disabled]="!registerForm.form.valid">立&nbsp;即&nbsp;注&nbsp;册</button>
          </form>
        </div>
    </div>
    <div class="row footer">
      <nav class="navbar-default navbar-fixed-bottom" style="background: white">
          <div class="container">
              <div class="row">
                <span><a href="#">关于我们</a>&nbsp;|&nbsp;<a href="#">联系我们</a>&nbsp;|&nbsp;<a href="#">人才招聘</a>&nbsp;|&nbsp;
                  <a href="#">广告服务</a>&nbsp;|&nbsp;<a href="#">友情链接</a>&nbsp;|&nbsp;<a href="#">销售联盟</a>&nbsp;|&nbsp;
                  <a href="#">English Site</a></span>
              </div>
              <div class="row">
                  <span>Copyright©2004-2018  茶道网版权所有</span>
              </div>
          </div>
      </nav>
    </div>
  </div>
</div>